<template>
  <div ref="split" class="split">
    <div ref="deviceList" class="deviceList">
      <DeviceList ref="deviceListChild" :allMethodDicSer="allMethodDicSer" />
    </div>
    <div ref="directiveList" class="directiveList">
      <DirectiveList ref="directiveListChild" @getDirectiveConfig="getDirectiveConfig" @exeCmd="exeCmd" />
    </div>
    <div ref="directiveConfig" class="directiveConfig">
      <DirectiveConfig ref="directiveConfigChild" :treeNodeId="treeNodeId" />
    </div>
    <div ref="cmdEnforcement" class="cmdEnforcement">
      <CMDEnforcement ref="cmdEnforcementChild" :manualTestLog="manualTestLog" />
    </div>
  </div>
</template>

<script setup lang="ts">

defineOptions({
  name: "DeviceView",
  components: {}
});


import { useDeviceStore } from "../store/deviceStore";
import { useDeviceViewStore } from "../store/deviceView";
const deviceView = useDeviceViewStore();

const dataEvent = (eventData: any) => {
  const { dataName, data } = eventData;
  if (dataName === "log") {
    manualTestLog.value = JSON.stringify(data);
  } else if (dataName === "deviceState") {
    deviceView.setCurrentDeviceConnStatus(data);
  }
  // console.log("子组件收到数据了", eventData);
}

defineExpose({
  dataEvent
})

// 2. 实例化组合式 store
const deviceStore = useDeviceStore();

// 验证存储结果
console.log("存储后 Pinia 中的值：", deviceStore.sendDeviceCmd);


import { ref, onMounted } from "vue";
import DeviceList from "./components/DeviceList.vue";
import DirectiveConfig from "./components/DirectiveConfig.vue";
import DirectiveList from "./components/DirectiveList.vue";
import CMDEnforcement from "./components/CmdEnforcement.vue";
// import CMDEnforceDli from "./components/cmdEnforceDli.vue";
import Split from "split.js";

const split = ref(null);
const deviceList = ref(null);
const directiveList = ref(null);
const directiveConfig = ref(null);
const directiveConfigChild = ref(null);
const cmdEnforcement = ref(null);
const cmdEnforcementChild = ref(null);

const allMethodDicSer = ref("");
const treeNodeId = ref("");
const manualTestLog = ref("");

onMounted(async () => {

  // 初始化分割线
  const options = [
    { el: [deviceList.value, directiveList.value, directiveConfig.value, cmdEnforcement.value], direction: "horizontal", sizes: [20, 20, 20, 40] },
  ];
  options.forEach((item: any) => {
    if (!item.el) return;
    Split(item.el, {
      snapOffset: 0,
      gutterSize: 3,
      sizes: item.sizes,
      direction: item.direction,
      onDragEnd: () => {
        console.log("拖动后执行");
      },
    });
  });
})


const getDirectiveConfig = (id: string) => {
  treeNodeId.value = id;
}

const exeCmd = () => {
  (directiveConfigChild.value as any).saveConfig();
}

</script>

<style lang="scss" scoped>
.split {
  display: flex;
  flex-direction: row;
  height: 100%;
  width: 100%;

  .deviceList,
  .directiveList,
  .directiveConfig,
  .cmdEnforcement {
    border: 1px solid #ccc;
  }

  .cmdEnforcement {
    height: calc(100% - 5px);
  }
}
</style>
